<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本转语音 - Shioa</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe', 
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a'
                        },
                        secondary: '#64748b',
                        accent: {
                            green: '#10b981',
                            purple: '#8b5cf6',
                            orange: '#f59e0b',
                            red: '#ef4444',
                            blue: '#06b6d4'
                        },
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        info: '#06b6d4'
                    },
                    borderRadius: {
                        'button': '8px'
                    },
                    fontFamily: {
                        'sans': ['Inter', 'ui-sans-serif', 'system-ui']
                    },
                    boxShadow: {
                        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
                        'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04)',
                        'strong': '0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 2px 10px -2px rgba(0, 0, 0, 0.04)'
                    }
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            min-height: 1024px;
        }
        .toast-container { 
            position: fixed; 
            top: 1rem; 
            right: 1rem; 
            z-index: 9999; 
        }
        .status-bar { 
            position: fixed; 
            top: 0; 
            left: 0; 
            right: 0; 
            z-index: 50; 
        }
        
        /* 自定义音频播放器样式 */
        .audio-player {
            width: 100%;
            border-radius: 12px;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            border: 1px solid #e2e8f0;
            padding: 1rem;
        }
        
        /* 波浪动画 */
        .wave-animation {
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }
        
        .wave-bar {
            width: 3px;
            background: #3b82f6;
            border-radius: 2px;
            animation: wave 1.5s ease-in-out infinite;
        }
        
        .wave-bar:nth-child(1) { height: 12px; animation-delay: 0s; }
        .wave-bar:nth-child(2) { height: 16px; animation-delay: 0.1s; }
        .wave-bar:nth-child(3) { height: 20px; animation-delay: 0.2s; }
        .wave-bar:nth-child(4) { height: 16px; animation-delay: 0.3s; }
        .wave-bar:nth-child(5) { height: 12px; animation-delay: 0.4s; }
        
        @keyframes wave {
            0%, 100% { transform: scaleY(0.3); }
            50% { transform: scaleY(1); }
        }
        
        /* 文本计数器样式 */
        .char-counter {
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 12px;
        }
        
        .char-counter.warning {
            color: #f59e0b;
        }
        
        .char-counter.error {
            color: #ef4444;
        }
        
        /* 模型选择卡片 */
        .model-card {
            border: 2px solid transparent;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .model-card:hover {
            border-color: #cbd5e1;
            background-color: #f8fafc;
        }
        
        .model-card.selected {
            border-color: #3b82f6;
            background-color: #dbeafe;
        }
        
        /* 进度条 */
        .progress-bar {
            width: 100%;
            height: 6px;
            background: #f1f5f9;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
            border-radius: 6px;
            transition: width 0.3s ease;
            position: relative;
        }
        
        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
            animation: shimmer 1.5s ease-in-out infinite;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen font-sans">
    <!-- 状态提示栏 -->
    <div id="status-bar" class="hidden status-bar bg-blue-500 text-white p-3 text-center">
        <div class="flex items-center justify-center">
            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
            <span id="status-text">正在加载...</span>
        </div>
    </div>

    <!-- Toast 容器 -->
    <div id="toast-container" class="toast-container space-y-2"></div>

    <!-- 导航由 shared-navigation.js 统一管理，实现真正的组件复用 -->

    <!-- 面包屑导航 -->
    <div class="max-w-[1440px] mx-auto px-6 py-4">
        <nav class="flex items-center gap-2 text-sm text-gray-500">
            <a href="index.html" class="hover:text-primary-600 transition-colors">
                <i class="fas fa-home"></i>
            </a>
            <span class="mx-2">/</span>
            <span class="text-gray-700">文本转语音</span>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <main class="max-w-[1440px] mx-auto px-6 pb-8">

        <!-- TTS功能区域 -->
        <div class="bg-white rounded-xl shadow-medium border border-gray-100 overflow-hidden">
            <!-- 头部区域 -->
            <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">语音合成工具</h3>
                        <p class="text-sm text-gray-600 mt-1">输入文本，选择语音模型，即可生成高质量语音</p>
                    </div>
                    <div class="flex items-center gap-2">
                        <span id="tts-status" class="text-xs px-2 py-1 rounded-full bg-gray-200 text-gray-600">检查中...</span>
                        <button onclick="checkTTSStatus()" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-lg transition-colors" title="刷新状态">
                            <i class="fas fa-sync-alt text-sm"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 主要功能区 -->
            <div class="p-6">
                <!-- 语音模型选择卡片 -->
                <div class="mb-6">
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-5 shadow-soft">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-sm font-semibold text-gray-800 flex items-center">
                                <i class="fas fa-robot mr-2 text-primary-500"></i>语音模型
                            </h4>
                            <div class="flex items-center gap-2">
                                <div id="model-status" class="w-2 h-2 rounded-full bg-gray-300"></div>
                                <span class="text-xs text-gray-500">模型加载中</span>
                            </div>
                        </div>
                        
                        <!-- 模型选择器 -->
                        <div class="mb-4">
                            <select id="model-selector" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none transition-all">
                                <option value="">正在加载模型...</option>
                            </select>
                        </div>
                        
                        <!-- 高级选项区域 -->
                        <div id="advanced-options" class="space-y-4">
                            <!-- 多人对话模式 -->
                            <div id="dialogue-section" class="hidden">
                                <div class="flex items-center gap-2 mb-2">
                                    <label class="flex items-center cursor-pointer">
                                        <input type="checkbox" id="dialogue-mode" class="mr-2 text-primary-600 focus:ring-primary-500 rounded">
                                        <span class="text-xs font-medium text-gray-700">
                                            <i class="fas fa-comments mr-1 text-primary-400"></i>多人对话模式
                                        </span>
                                    </label>
                                </div>
                                <div id="dialogue-help" class="text-xs text-gray-500 hidden">
                                    📝 格式：[说话人名]对话内容 例：[小明]你好！[小红]你好，很高兴见到你。
                                </div>
                            </div>
                            
                            <!-- 多说话人选择 -->
                            <div id="speaker-section" class="hidden">
                                <label class="block text-xs font-medium text-gray-700 mb-2">
                                    <i class="fas fa-users mr-1 text-primary-400"></i>说话人音色
                                </label>
                                <select id="speaker-selector" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:border-primary-500 focus:ring-1 focus:ring-primary-200 focus:outline-none transition-all">
                                    <option value="">选择说话人音色...</option>
                                </select>
                            </div>
                            
                            <!-- 情感选择 -->
                            <div id="emotion-section" class="hidden">
                                <label class="block text-xs font-medium text-gray-700 mb-2">
                                    <i class="fas fa-heart mr-1 text-primary-400"></i>情感色彩
                                </label>
                                <select id="emotion-selector" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:border-primary-500 focus:ring-1 focus:ring-primary-200 focus:outline-none transition-all">
                                    <option value="中性">中性</option>
                                    <option value="高兴">高兴</option>
                                    <option value="悲伤">悲伤</option>
                                    <option value="愤怒">愤怒</option>
                                    <option value="惊讶">惊讶</option>
                                </select>
                            </div>
                            
                            <!-- 声音克隆上传 -->
                            <div id="clone-section" class="hidden">
                                <label class="block text-xs font-medium text-gray-700 mb-2">
                                    <i class="fas fa-upload mr-1 text-primary-400"></i>参考音频 (WAV/MP3/FLAC/M4A)
                                </label>
                                <div class="flex gap-2">
                                    <input type="file" id="reference-audio" accept=".wav,.mp3,.flac,.m4a" class="flex-1 text-xs file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-xs file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 transition-colors">
                                    <button onclick="uploadReferenceAudio()" id="upload-btn" class="px-3 py-1 text-xs bg-primary-500 text-white rounded hover:bg-primary-600 transition-colors disabled:opacity-50">
                                        上传
                                    </button>
                                </div>
                                <div id="upload-status" class="text-xs text-gray-500 mt-1"></div>
                            </div>
                            
                        </div>
                    </div>
                </div>

                <!-- 文本输入区域 -->
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <label for="text-input" class="block text-sm font-semibold text-gray-700">
                            <i class="fas fa-edit mr-2 text-primary-500"></i>输入文本
                        </label>
                        <span id="char-counter" class="char-counter text-gray-400">0/1000</span>
                    </div>
                    <div class="relative">
                        <textarea
                            id="text-input"
                            placeholder="请在此输入要转换为语音的文本内容..."
                            class="w-full h-32 px-4 py-3 border border-gray-300 rounded-button focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none transition-all resize-none"
                            maxlength="1000"
                        ></textarea>
                        <div class="absolute bottom-3 right-3">
                            <button onclick="clearText()" class="p-1 text-gray-400 hover:text-gray-600 transition-colors" title="清空文本">
                                <i class="fas fa-times text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mt-2 text-xs text-gray-500">
                        <div id="normal-tip" class="">
                            💡 提示：支持中英文混合输入，建议单次输入不超过1000字符以获得最佳效果
                        </div>
                        <div id="dialogue-tip" class="hidden">
                            🎭 多人对话格式：[说话人名]对话内容 例如：[小明]你好！[小红]你好，很高兴见到你。
                        </div>
                    </div>
                </div>

                <!-- 控制区域 -->
                <div class="mb-6">
                    <div class="flex flex-col sm:flex-row items-start sm:items-end gap-4">
                        <div class="flex gap-3">
                            <button onclick="previewText()" 
                                    class="flex items-center gap-2 px-4 py-2 text-gray-600 border border-gray-300 rounded-button hover:bg-gray-50 transition-colors"
                                    id="preview-btn">
                                <i class="fas fa-eye text-sm"></i>
                                <span>预览</span>
                            </button>
                            
                            <button onclick="generateSpeech()" 
                                    class="flex items-center gap-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white px-6 py-2 rounded-button font-medium shadow-lg hover:from-primary-600 hover:to-primary-700 hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200"
                                    id="generate-btn">
                                <i class="fas fa-microphone text-sm"></i>
                                <span>生成语音</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 进度指示区域 -->
                <div id="progress-section" class="hidden mb-6">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">生成进度</span>
                            <span id="progress-text" class="text-sm text-gray-500">准备中...</span>
                        </div>
                        <div class="progress-bar">
                            <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                </div>

                <!-- 结果展示区域 -->
                <div id="result-section" class="hidden">
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-lg font-semibold text-gray-800">
                                <i class="fas fa-volume-up mr-2 text-green-500"></i>语音已生成
                            </h4>
                            <div class="flex items-center gap-2">
                                <span id="generation-time" class="text-xs text-gray-500"></span>
                                <div class="wave-animation hidden" id="wave-animation">
                                    <div class="wave-bar"></div>
                                    <div class="wave-bar"></div>
                                    <div class="wave-bar"></div>
                                    <div class="wave-bar"></div>
                                    <div class="wave-bar"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 音频播放器 -->
                        <div class="audio-player mb-4">
                            <audio id="audio-player" controls class="w-full">
                                您的浏览器不支持音频播放
                            </audio>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center gap-2 text-sm text-gray-600">
                                <i class="fas fa-info-circle"></i>
                                <span id="audio-info">文件信息加载中...</span>
                            </div>
                            <div class="flex gap-2">
                                <button onclick="downloadAudio()" 
                                        class="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-button hover:bg-green-600 transition-colors"
                                        id="download-btn">
                                    <i class="fas fa-download text-sm"></i>
                                    <span>下载</span>
                                </button>
                                <button onclick="shareAudio()" 
                                        class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-button hover:bg-blue-600 transition-colors">
                                    <i class="fas fa-share text-sm"></i>
                                    <span>分享</span>
                                </button>
                                <button onclick="generateAgain()" 
                                        class="flex items-center gap-2 px-4 py-2 text-gray-600 border border-gray-300 rounded-button hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-redo text-sm"></i>
                                    <span>重新生成</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 使用说明 -->
        <div class="mt-8 bg-white rounded-xl shadow-soft border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>使用说明
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">📝 文本要求</h4>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li>• 支持中英文混合输入</li>
                        <li>• 建议单次不超过1000字符</li>
                        <li>• 避免使用特殊符号</li>
                        <li>• 标点符号会影响语音停顿</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">🎵 音质说明</h4>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li>• 输出格式：WAV (16kHz)</li>
                        <li>• 文件自动清理：1小时后删除</li>
                        <li>• 支持下载到本地保存</li>
                        <li>• 建议使用耳机获得最佳效果</li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

    <!-- JavaScript -->
    <script src="js/env.js"></script>
    <script>
    // 设置全局API配置
    window.API_BASE_URL = API_BASE_URL;
    </script>
    <script src="js/config.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <script src="js/text-to-speech.js?v=20250831_fix"></script>
    <script src="js/shared-navigation.js"></script>
</body>
</html>